<template>
  <div class="home-container">
    <!-- 导航栏 -->
    <t-navbar title="陪玩之家" :fixed="true" class="custom-navbar">
      <template #right>
        <icon-font name="notification" class="notice-icon" @click="showNotifications" />
      </template>
    </t-navbar>

    <!-- 搜索与筛选区域 -->
    <div class="search-section">
      <t-row gutter="8">
        <t-col span="5">
          <t-dropdown-menu class="city-selector">
            <t-dropdown-item
                :options="citys.options"
                v-model="citys.value"
                @change="handleCityChange"
            >
              <template #default>
                <icon-font name="location" class="location-icon" />
                {{ citys.value }}
              </template>
            </t-dropdown-item>
          </t-dropdown-menu>
        </t-col>
        <t-col span="19">
          <t-search
              v-model="searchmsg"
              shape="round"
              placeholder="搜索游戏/陪玩师/技能"
              clearable
              class="custom-search"
              @enter="handleSearch"
          >
            <template #left-icon>
              <icon-font name="search" />
            </template>
          </t-search>
        </t-col>
      </t-row>
    </div>

    <!-- 轮播图 -->
    <div class="swiper-section">
      <t-swiper
          :navigation="{ type: 'dots-bar' }"
          :autoplay="{ interval: 3000 }"
          height="160px"
          class="swiper-container"
      >
        <t-swiper-item v-for="(item, index) in swiperList" :key="index">
          <div class="swiper-item">
            <img :src="item" class="swiper-image" />
          </div>
        </t-swiper-item>
      </t-swiper>
    </div>

    <!-- 快捷入口 -->
    <div class="feature-cards">
      <div class="access-item" v-for="item in quickAccess" :key="item.id" @click="handleQuickAccess(item.id)">
        <div class="access-icon-wrapper">
          <icon-font :name="item.icon" class="access-icon" />
        </div>
        <div class="access-label">{{ item.label }}</div>
      </div>
    </div>

    <!-- 热门分类 -->
    <div class="section-container category-section">
      <div class="section-header">
        <div class="section-title">
          <div class="title-indicator"></div>
          热门分类
        </div>
        <t-button variant="text" size="small" @click="viewAllCategories">
          全部 <icon-font name="chevron-right" />
        </t-button>
      </div>
      <div class="category-tags">
        <t-tag
            v-for="(tag, index) in gameCategories"
            :key="index"
            shape="round"
            variant="light"
            theme="primary"
            class="category-tag"
            @click="filterByCategory(tag)"
        >
          #{{ tag }}
        </t-tag>
      </div>
    </div>

    <!-- 推荐陪玩师 -->
    <div class="section-container recommend-section">
      <div class="section-header">
        <div class="section-title">
          <div class="title-indicator"></div>
          推荐陪玩师
        </div>
        <t-button variant="text" size="small" @click="viewAllPlayers">
          更多 <icon-font name="chevron-right" />
        </t-button>
      </div>
      
      <div class="player-list">
        <div
            class="player-card"
            v-for="player in recommendPlayers"
            :key="player.id"
            @click="viewPlayerDetail(player)"
        >
          <div class="player-avatar">
            <img :src="player.avatar" class="avatar-img" />
            <div class="online-status" :class="{ online: player.online }"></div>
          </div>
          <div class="player-info">
            <div class="player-header">
              <div class="player-name">{{ player.name }}</div>
              <div class="player-rating">
                <icon-font name="star-filled" class="star-icon" />
                {{ player.rating }}
              </div>
            </div>
            <div class="game-tags">
              <t-tag
                  v-for="(tag, index) in player.tags"
                  :key="index"
                  size="small"
                  shape="round"
                  theme="primary"
                  variant="light"
                  class="game-tag"
              >
                {{ tag }}
              </t-tag>
            </div>
            <div class="player-footer">
              <div class="price-info">¥{{ player.price }}<span class="price-unit">/小时</span></div>
              <t-button size="small" shape="round" theme="primary" class="chat-btn">聊一聊</t-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 悬浮操作按钮 -->
    <div class="float-action">
      <t-button shape="circle" theme="primary" size="large" @click="startQuickMatch" class="float-btn">
        <icon-font name="flashlight" class="float-icon" />
      </t-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

// 轮播图数据
const swiperList = ref([
  "https://ts1.cn.mm.bing.net/th/id/R-C.6daee779cd458e9f81157a389319307f?rik=O8832ooAdb3oEg&riu=http%3a%2f%2fshp.qpic.cn%2flolwebschool%2f791243504%2fa851d47b3b9ef2cb021d510c9751404b%2f0&ehk=Bbpp%2bQvtUuomjifCXB%2f70gPF10xPDbjMpmN3iZIXPVE%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1",
  "https://puui.qpic.cn/vpic_cover/k3510ngvj8c/k3510ngvj8c_1681547106_hz.jpg/1280",
  "https://pic.kts.g.mi.com/8a2235432842527847716d6a8169afe84849467039283950418.jpg",
  "https://ts1.cn.mm.bing.net/th/id/R-C.c976b9d28c73b11c8c06f6b6b950e72e?rik=47OMAdyfVed2Dg&riu=http%3a%2f%2fimg001.dailiantong.com%2fNews%2f20210305%2fzty_20210305133954983.gif&ehk=gB3CkWgM3LSkwayaStcTTGIcpmqvuVyN8wruI1Inl%2bg%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1",
  "https://ts1.cn.mm.bing.net/th/id/R-C.44b0890b31db4ed09e699d3fec0d307e?rik=Ej86U5BSTOcwVw&riu=http%3a%2f%2fwww.gamelook.com.cn%2fwp-content%2fuploads%2f2021%2f04%2fyjwjcs001.jpg&ehk=ATjN%2f8XnR9RrQCFOCREihQWDfUFwLhtQbYIfN7l9NKU%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1"
]);

// 城市选择器数据
const citys = ref({
  value: "郑州",
  options: [
    { value: "郑州", label: "郑州" },
    { value: "北京", label: "北京" },
    { value: "上海", label: "上海" },
    { value: "深圳", label: "深圳" },
    { value: "广州", label: "广州" },
    { value: "杭州", label: "杭州" }
  ]
});

// 搜索文本
const searchmsg = ref("");

// 快捷入口数据
const quickAccess = ref([
  { id: 1, icon: "game", label: "游戏陪玩" },
  { id: 2, icon: "mic", label: "语音连麦" },
  { id: 3, icon: "user", label: "技能分享" },
  { id: 4, icon: "group", label: "组队大厅" }
]);

// 游戏分类
const gameCategories = ref([
  "王者荣耀", "英雄联盟", "和平精英",
  "原神", "CS:GO", "永劫无间", "DOTA2", "绝地求生"
]);

// 推荐陪玩师数据
const recommendPlayers = ref([
  {
    id: 1,
    name: "游戏小仙女",
    avatar: "https://tse2-mm.cn.bing.net/th/id/OIP-C.g5MgjmRcOiMpqZ7kPYVRHAHaHY?rs=1&pid=ImgDetMain",
    rating: 4.9,
    price: 30,
    tags: ["王者荣耀", "语音陪玩"],
    online: true
  },
  {
    id: 2,
    name: "技术大神",
    avatar: "https://tse3-mm.cn.bing.net/th/id/OIP-C.b7PMBD5HLWPqHAmW7hH-FQHaHZ?rs=1&pid=ImgDetMain",
    rating: 5.0,
    price: 45,
    tags: ["英雄联盟", "教学指导"],
    online: false
  },
  {
    id: 3,
    name: "萌新带飞",
    avatar: "https://tse3-mm.cn.bing.net/th/id/OIP-C.j4NZvKHCYoiG0Ggy5EJ71AHaHa?rs=1&pid=ImgDetMain",
    rating: 4.8,
    price: 35,
    tags: ["和平精英", "娱乐陪玩"],
    online: true
  }
]);

// 城市选择处理
const handleCityChange = (value: string) => {
  console.log("选择城市:", value);
  // 根据城市筛选陪玩数据
};

// 搜索处理
const handleSearch = () => {
  console.log("搜索内容:", searchmsg.value);
  if (searchmsg.value.trim()) {
    // 实现搜索逻辑
  }
};

// 查看全部分类
const viewAllCategories = () => {
  console.log("查看全部分类");
  // 跳转到分类页面
};

// 按分类筛选
const filterByCategory = (category: string) => {
  console.log("筛选分类:", category);
  // 根据分类筛选陪玩数据
};

// 查看陪玩师详情
const viewPlayerDetail = (player: any) => {
  console.log("查看陪玩师详情:", player);
  router.push({ path: '/compainon', query: { id: player.id } });
};

// 查看全部陪玩师
const viewAllPlayers = () => {
  console.log("查看全部陪玩师");
  router.push('/compainon');
};

// 处理快捷入口点击
const handleQuickAccess = (id: number) => {
  console.log("访问快捷入口:", id);
  switch (id) {
    case 1: // 游戏陪玩
      router.push('/compainon');
      break;
    case 2: // 语音连麦
      router.push('/message');
      break;
    case 3: // 技能分享
      // 跳转到技能分享页面
      break;
    case 4: // 组队大厅
      // 跳转到组队大厅页面
      break;
  }
};

// 开始快速匹配
const startQuickMatch = () => {
  console.log("开始快速匹配");
  // 实现快速匹配逻辑
};

// 显示通知
const showNotifications = () => {
  console.log("显示通知");
  // 显示通知面板
};
</script>

<style scoped>
.home-container {
  background: #f5f7fa;
  min-height: 100vh;
  padding-bottom: 80px;
}

/* 导航栏样式 */
.custom-navbar {
  background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
  color: white;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.notice-icon {
  font-size: 20px;
}

/* 搜索区域样式 */
.search-section {
  padding: 12px 16px;
  background: white;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.city-selector {
  border-radius: 20px;
  background: #f8f9fe;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.location-icon {
  margin-right: 4px;
  color: var(--td-brand-color);
}

.custom-search {
  --td-search-bg-color: #f8f9fe;
}

/* 轮播图样式 */
.swiper-section {
  padding: 12px 16px;
}

.swiper-container {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.swiper-item {
  height: 100%;
  width: 100%;
}

.swiper-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

/* 快捷入口样式 */
.feature-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 16px;
  margin: 0 16px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-top: 16px;
}

.access-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.access-item:hover {
  transform: translateY(-2px);
}

.access-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(110, 142, 251, 0.1) 0%, rgba(167, 119, 227, 0.1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.access-icon {
  font-size: 24px;
  color: var(--td-brand-color);
}

.access-label {
  font-size: 12px;
  color: #666;
}

/* 通用部分样式 */
.section-container {
  background: white;
  padding: 16px;
  margin: 16px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
}

.title-indicator {
  width: 4px;
  height: 16px;
  background: var(--td-brand-color);
  border-radius: 2px;
  margin-right: 8px;
}

/* 分类标签样式 */
.category-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.category-tag {
  cursor: pointer;
  transition: transform 0.2s;
}

.category-tag:hover {
  transform: scale(1.05);
}

/* 陪玩师列表样式 */
.player-list {
  display: grid;
  gap: 16px;
}

.player-card {
  display: flex;
  padding: 12px;
  background: #f8f9fe;
  border-radius: 12px;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.player-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.player-avatar {
  position: relative;
  margin-right: 12px;
}

.avatar-img {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.online-status {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ddd;
  position: absolute;
  bottom: 4px;
  right: 4px;
  border: 2px solid white;
}

.online-status.online {
  background: #52c41a;
}

.player-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.player-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.player-name {
  font-size: 15px;
  font-weight: 500;
  color: #333;
}

.player-rating {
  display: flex;
  align-items: center;
  color: #ff9800;
  font-size: 13px;
}

.star-icon {
  margin-right: 2px;
}

.game-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.player-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-info {
  color: #f5222d;
  font-size: 16px;
  font-weight: 600;
}

.price-unit {
  font-size: 12px;
  font-weight: normal;
  color: #999;
}

.chat-btn {
  font-size: 12px;
  padding: 0 12px;
}

/* 悬浮按钮样式 */
.float-action {
  position: fixed;
  bottom: 90px;
  right: 24px;
  z-index: 100;
}

.float-btn {
  width: 56px;
  height: 56px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.float-icon {
  font-size: 24px;
}
</style>